<template>
  <div class="base-info" v-if="isShowComp">
    <div class="info-title">{{ goods.title }}</div>
    <div class="info-price">
      <span class="new-price">{{ goods.newPrice }}</span>
      <span class="old-price">{{ goods.oldPrice }}</span>
      <span
        class="discount"
        v-if="goods.discount"
        :style="{backgroundColor: goods.discountBgColor}"
      >{{ goods.discount }}</span>
    </div>

    <div class="info-other">
      <span>{{ goods.columns[0] }}</span>
      <span>{{ goods.columns[1] }}</span>
      <span>{{ lastServicesName }}</span>
    </div>

    <div class="info-service">
      <span
        class="info-service-item"
        v-for="(item, index) in exceptLastServices"
        :key="'service' + index"
      >
        <img class="icon" :src="item.icon" alt />
        <span class="text">{{ item.name }}</span>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailBaseInfo",

  // 父组件传递数据
  props: {
    goods: {
      type: Object,
      default() {
        return {};
      },
    },
  },

  // 计算属性
  computed: {
    // 是否显示该组件
    isShowComp() {
      return Object.keys(this.goods).length != 0;
    },

    // 返回 >>> services数组长度
    servicesLength() {
      return this.goods.services.length;
    },

    // 返回 >>> services列表中最后一个name
    lastServicesName() {
      return this.goods.services[this.servicesLength - 1].name;
    },

    // 返回 >>> services列表中除了最后一个元素的数据
    exceptLastServices() {
      return this.goods.services.filter(
        (item, index) => index != this.servicesLength - 1
      );
    },
  },
};
</script>

<style lang="less" scoped>
.base-info {
  padding: 15px 8px 0;
  color: #999999;
  border-bottom: 5px solid #f2f5f8;
  .info-title {
    // 标题
    color: #222222;
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
  }
  .info-price {
    // 价格
    margin: 10px 0 20px;
    .new-price {
      // 新
      font-size: 24px;
      color: var(--color-high-text);
    }
    .old-price {
      // 旧
      margin: 0 5px;
      font-size: 13px;
      // TODO: 删除线
      text-decoration: line-through;
    }
    .discount {
      // 折扣文字样式
      position: relative;
      top: -5px;
      padding: 3px 6px;
      border-radius: 10px;
      font-size: 14px;
      color: var(--color-background);
      background-color: var(--color-tint);
    }
  }
  .info-other {
    // 其它 [销量, 收藏, 发货时间]
    display: flex;
    // TODO: flex两端对齐
    justify-content: space-between;
    padding-bottom: 6px;
    border-bottom: 1px solid #f2f5f8;
    span {
      font-size: 14px;
      // flex: 1;
    }
  }
  .info-service {
    // 服务
    display: flex;
    justify-content: space-between;
    margin: 25px 0;
    .info-service-item {
      // 单个服务信息的块
      // flex: 1;
      .icon {
        margin: -1.5px 4px 0 0;
        width: 14px;
        height: 14px;
        vertical-align: middle;
      }
      .text {
        color: #333333;
        font-size: 13px;
      }
    }
  }
}
</style>